<template>
  <div>
    <el-dialog @close="close" :title="status.isAdd?'管理员添加':'管理员编辑'" :visible.sync="status.isshow">
      <el-form :model="form">
        {{ form }}
        <el-form-item label="所属角色" label-width="120px">
          <el-select v-model="form.roleid" placeholder="请选择所属角色">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.rolename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" v-if="status.isAdd" @click="add">添 加</el-button>
        <el-button type="primary" v-else @click="update">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 1.静态页面
// 2.一进页面就请求角色列表
// 3. 添加
// 4.列表
// 5.删除
// 6.编辑
// 7.修改
import { reqrolelist, requseredit } from "../../../http/api";
import { successAlert, errorAlert } from "../../../utils/alert";
import { requseradd, requserinfo } from "../../../http/api";
import { mapGetters, mapActions } from "vuex";
export default {
  props: ["status", "list"],
  data() {
    return {
      isshow: false,
      //6.1 初始化添加的数据
      // 2.1 初始化角色数据
      roleList: [],
      formLabelWidth: "120px",
      // 2.2 初始化form数据
      form: {
        roleid: "",
        username: "",
        password: "",
        status: 1
      }
    };
  },
  mounted() {
    // 2.3 发请求
    //  2.3请求角色列表的数据
    reqrolelist().then(res => {
      if (res.data.code == 200) {
        this.roleList = res.data.list;
      }
    });
  },
  methods: {
    ...mapActions({
      changeInfo: "changeInfo"
    }),
    cancel() {
      // 通知父组件
      this.$emit("cancel");
    },
    // 6.6清空form
    empty() {
      this.form = {
        roleid: "",
        username: "",
        password: "",
        status: 1
      };
    },
    // 封装验空
    changeData() {
      return new Promise(reslove => {
        // 验空
        if (this.form.roleid == "") {
          errorAlert("所属角色不能为空！");
          return;
        }
        if (this.form.username == "") {
          errorAlert("用户名不能为空！");
          return;
        }
        if (this.status.isAdd) {
          if (this.form.password == "") {
            errorAlert("密码不能为空！");
            return;
          }
        }
        reslove();
      });
    },
    add() {
      // 等待验证完才才看是否要发起请求
      this.changeData().then(() => {
        // 3.1 点击了添加按钮
        requseradd(this.form).then(res => {
          if (res.data.code == 200) {
            //1.弹成功
            successAlert(res.data.msg);
            // 2.清空form
            this.empty();
            //3. 弹框消失
            this.status.isshow = false;
            // 4.重新渲染
            this.$emit("init");
          }
        });
      });
    },

    //6.父元素点击了编辑按钮，触发子组件的的getOne方法
    getOne(uid) {
      //发请求---->获取一条数据
      requserinfo({
        uid: uid
      }).then(res => {
        this.form = res.data.list;
        //密码留空
        this.form.password = "";
      });
    },
    // 7.点击了修改
    update() {
      this.changeData().then(() => {
        // 发请求
        requseredit(this.form).then(res => {
          if (res.data.code == 200) {
            // 1.弹成功
            successAlert(res.data.msg);

            //验证一下刚刚修改的管理员是不是当前登录用户，如果是，就要清除用户信息，并退出登录
            if (this.form.uid === this.info.uid) {
              // 清除数据
              this.changeInfo({});
              // 跳到登录页面
              this.$router.replace("/login");
              return;
            }
            // 2.清空form
            this.empty();
            //3. 弹框消失
            this.status.isshow = false;
            //4.列表重新渲染
            this.$emit("init");
          }
        });
      });
    },
    // 8.分页操作

    // 9.修改Bug
    // 我们希望点击了添加之后，取消，在点击添加，数据还在，但点击了编辑之后，取消后点击添加，清空内容
    // 给弹框添加close关闭事件---如果是添加的取消，什么都不做；如果是编辑的取消，form清空
    close() {
      if (!this.status.isAdd) {
        this.empty();
      }
    }
  },
  computed: {
    ...mapGetters(["info"])
  }
};
</script>

<style>
</style>